<template>
	<div class="content native-scroll mescroll" id="mescroll">
		<div class="bargain">
			<div class="group" id="group_list">

				<a class="commodity displayFlex" v-for="item in CollectList" @click="togoods(item.goods_id)">
					<div class="commodity_img">
						<img class="lazy" :src="item.original_img">
					</div>
					<div class="flex flex-box-y">
						<div class="commodity_title">{{item.goods_name}}</div>
						<div class="commodity_has_robbed">{{item.sales_sum}}人最低价拿到</div>
						<div class="flex"></div>
						<div class="displayFlex">
							<div class="flex commodity_lowest_price flex_x"><span
									class="commodity_money_img">￥</span>{{item.new_price}}</div>
						</div>
					</div>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				CollectList: {},
			};
		},
		onLoad(options) {
			this.getData();
		},
		methods: {
			togoods(goods_id) {
                 uni.redirectTo({
                 	url:'/pages/goods/goods?id='+goods_id
                 })
			},
			getData() {
				this.$api.get({
					url: 'portal/my/get_my_collect_goods',
					data: {},
					success: res => {
						this.CollectList = res.data;
					}
				});
			},
		}
	};
</script>


<style>
	html,
	body {
		/*height: 100%;*/
		background: #f1f1f1;
		margin: 0;
		padding: 0;
		font-size: .825rem;
	}

	.displayFlex {
		display: flex;
	}

	.flex {
		flex: 1;
		text-align: center;
	}

	.flex_xy {
		display: flex;
		align-items: center;
		/*垂直居中*/
		justify-content: center;
		/*水平居中*/
	}

	.flex_x {
		display: flex;
		align-items: center;
		/*垂直居中*/
	}

	.flex_y {
		display: flex;
		justify-content: center;
		/*水平居中*/
	}

	.bargain {
		height: 100%;
		width: 100%;
		position: relative;
	}

	.fuc {
		position: absolute;
		height: 28px;
		line-height: 28px;
		width: 100%;
		background: rgba(128, 128, 128, 0.2);
	}

	.tab {
		height: 40px;
		line-height: 40px;
	}

	.group {
		background: #fff;
		padding: 0 10px;
		/*margin: 10px 0;*/
		font-size: .625rem;
		height: 100%;
	}

	.group_merchant {
		height: 40px;
		line-height: 40px;
	}

	.icon {
		margin: 7px 0 0 10px;
		height: 25px;
	}

	.group_merchant_title {
		text-align: left;
		color: #999;
	}

	.group_merchant_title img {
		width: 20px;
		vertical-align: middle;
	}

	.send {
		margin: 0 20px;
		color: #999;
	}

	.commodity_img {
		width: 80px;
		height: 80px;
		margin-right: 10px;
	}

	.commodity_img img {
		width: 100%;
	}

	.commodity_title {
		text-align: left;
		margin-bottom: 10px;
		font-weight: 700;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-size: 14px;
	}

	.commodity_has_robbed {
		/*margin-bottom: 10px;*/
		text-align: left;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		color: #b1b1b1;
	}

	.commodity_lowest_price {
		text-align: left;
		color: #ff4b4b;
		font-size: 14px;
	}

	.commodity_btn {
		padding: 10px;
	}

	.commodity_btn button {
		border-radius: 4px;
		border: none;
		background-color: #0894ec;
		color: white;
		padding: 5px 10px;
	}

	.tab_bottom {
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	img {
		width: 100%;
		height: 100%;
	}

	a {
		color: #000;
	}

	a:link {
		text-decoration: none;
	}

	a:visited {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}

	a:active {
		text-decoration: none;
	}

	.tab_bottom_text {
		padding: 20px;
	}

	/*.buttons-tab .button{*/
	/*line-height: 0;*/
	/*}*/
	.commodity {
		padding: 10px 0;
		border-bottom: 1px solid #f1f1f1;
	}

	.commodity_money_img {
		font-size: 1rem;
		color: #ff4b4b;
	}

	.high_money {
		padding-left: 8px;
		color: #999;
		text-decoration: line-through;
		/*font-size: 1rem;*/
	}

	.flex-box-y {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		display: -webkit-flex
	}

	.money_btn {
		padding: 6px;
		background-color: #df2e24;
		color: #fff;
		font-size: 12px;
		border-radius: 4px;
	}

	.no_collection {
		align-items: center;
		display: flex;
		justify-content: center;
		height: 100%;
	}
</style>
